<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="./js/verify.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="./css/alarm.css" />
</head>

<body>
    <div id="container" class="alarm">
        <div class="alarm_01">
            <!--主屏内容-->
            <div class="alarm_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="./images/back.svg" alt="">
                    </a>
                    <span class="tit">工单管理</span>
                </div>
                <div class="m_content">
                    <div class="sb_tit">
                        <select id="selectxm" value="">
                            <option value="0" selected>项目</option>
                            <option value="1">深中二航搅拌站</option>
                            <option value="3">深中二公局S06标段</option>
                        </select>
                        <select id="xmlist" value="">
                            <option value="0" selected>工单状态</option>
                            <option value="1">一级告警</option>
                            <option value="2">二级告警</option>
                            <option value="3">三级告警</option>
                            <option value="4">四级告警</option>
                        </select>
                        <span onclick="window.location.href='./order/ordernew.html'">新建</span>
                        <!-- <select name="" id=""></select> -->
                    </div>

                    <div class="numobj" id="numobj">显示记录条数：<span id="shownum"></span></div>
                    <div class="gjdata">
                        <div class="data_wrap" id="listdata">
                            <a href="./order/orderdetail_gj.html" class="datalista">
                                <span class="dataleft">01021</span>
                                <span class="dataright">
                                    <span class="dataleft">工单巡检</span>
                                    <span class="readyaccept">待接受</span>
                                    <span class="dataicon">
                                        <img src="./images/arrowsr.svg" alt="" />
                                    </span>
                                </span>
                            </a>
                            <a href="order/orderdetail_fj.html" class="datalista">
                                <span class="dataleft">01022</span>
                                <span class="dataright">
                                    <span class="dataleft">运维工单</span>
                                    <span class="alreadydone">已完成</span>
                                    <span class="dataicon">
                                        <img src="./images/arrowsr.svg" alt="" />
                                    </span>
                                </span>
                            </a>
                            <a href="" class="datalista">
                                <span class="dataleft">01023</span>
                                <span class="dataright">
                                    <span class="dataleft">系统运维</span>
                                    <span class="bedoing">进行中</span>
                                    <span class="dataicon">
                                        <img src="./images/arrowsr.svg" alt="" />
                                    </span>
                                </span>
                            </a>

                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="./js/swiper-3.4.2.min.js"></script>
    <script type="text/javascript" src="./layer/layer.js"></script>
    <script>
        $(document).ready(function () {
            updateData(); // 首次加载立即请求数据
            // setInterval(updateData, 1000); // 首次加载之后，每1s重新请求一次数据
            function updateData() { // 请求数据
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "http://112.74.169.99:21021/api/services/app/AlarmService/GetAlarmInfoListByProperty?projectid=0&alarmlevel=0&userid=" +
                        userid,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept",
                            "application/json, text/javascript, */*; q=0.01"
                        );
                        xhr.setRequestHeader("Authorization", accessToken);
                        xhr.setRequestHeader('.AspNetCore.Culture',
                            'zh-Hans');
                    },
                    success: function (res) {
                        // console.log("请求成功");
                        var data = res.result;
                        // $("#listdata").html(` `);
                        // $("#listdata").html(eachdata(data));

                        if (data.length > 0) {
                            $("#numobj").css("display", "block");
                        } else {
                            $("#numobj").css("display", "none");
                        }
                        $("#shownum").html('');
                        $("#shownum").html(data.length);

                        $("#selectxm").change(function () {
                            // console.log("项目切换");
                            var xmchose = $("#selectxm option:selected").attr('value');
                            var xmlist = $("#xmlist option:selected").attr('value');

                            $.ajax({
                                type: "GET",
                                dataType: "json",
                                url: "http://112.74.169.99:21021/api/services/app/AlarmService/GetAlarmInfoListByProperty?projectid=" +
                                    xmchose + "&alarmlevel=" + xmlist + "&userid=" +
                                    userid,
                                beforeSend: function (xhr) {
                                    xhr.setRequestHeader("Accept",
                                        "application/json, text/javascript, */*; q=0.01"
                                    );
                                    xhr.setRequestHeader("Authorization",
                                        accessToken);
                                    xhr.setRequestHeader('.AspNetCore.Culture',
                                        'zh-Hans');
                                },
                                success: function (res) {
                                    // console.log("项目请求成功");
                                    var data = res.result;

                                    if (data.length > 0) {
                                        $("#numobj").css("display", "block");
                                    } else {
                                        $("#numobj").css("display", "none");
                                    }
                                    $("#listdata").html(` `);
                                    $("#listdata").html(eachdata(data));
                                },
                                error: function (err) {
                                    console.log("请求失败");
                                }
                            });

                        });


                        $("#xmlist").change(function () {
                            // console.log("类型切换");
                            var xmchose = $("#selectxm option:selected").attr('value');
                            var xmlist = $("#xmlist option:selected").attr('value');
                            $.ajax({
                                type: "GET",
                                dataType: "json",
                                url: "http://112.74.169.99:21021/api/services/app/AlarmService/GetAlarmInfoListByProperty?projectid=" +
                                    xmchose + "&alarmlevel=" + xmlist + "&userid=" +
                                    userid,
                                beforeSend: function (xhr) {
                                    xhr.setRequestHeader("Accept",
                                        "application/json, text/javascript, */*; q=0.01"
                                    );
                                    xhr.setRequestHeader("Authorization",
                                        accessToken);
                                    xhr.setRequestHeader('.AspNetCore.Culture',
                                        'zh-Hans');
                                },
                                success: function (data) {
                                    // console.log("请求成功");
                                    var data = res.result;

                                    if (data.length > 0) {
                                        $("#numobj").css("display", "block");
                                    } else {
                                        $("#numobj").css("display", "none");
                                    }
                                    $("#listdata").html(` `);
                                    $("#listdata").html(eachdata(data));
                                },
                                error: function (err) {
                                    console.log("请求失败");
                                }
                            });
                        });
                    },
                    error: function (err) {
                        console.log("请求失败");
                    }
                });

            }


            // 遍历数据
            function eachdata(obj) {
                var str = '';
                if (obj.constructor == Array) {
                    for (var i = 0, len = obj.length; i < len; i++) {
                        var url = '';
                        str += `<a href="` +
                            `alarm/alarmdetail.html?id=` + obj[i].id +
                            `" class="datalista">`;
                        str += `<span class="dataleft">` + obj[i].devname + `</span>`;
                        str += `<span class="dataright">`;
                        if (obj[i].alarmstate == 1) {
                            str += `<span class="normalstyle">已完成</span>`;
                        } else if (obj[i].alarmstate == 2) {
                            str += `<span class="redstyle">待接受</span>`;
                        }
                        str += `<span class="dataicon">`;
                        str += `<img src="./images/arrowsr.svg" alt="" />`;
                        str += `</span>`;
                        str += `</span>`;
                        str += `</a>`;
                    }
                    return str;
                }
            }
        });
    </script>

</body>

</html>